<div class="collection">
    <div class="nav">
        <a href="#personal/collection">
            <div class="nav-li">收藏店铺</div>
        </a>
        <div class="nav-li focus">收藏商品</div>
    </div>

    <hr />

    <div class="collection-box">
    {{#each $Cache.user.collect_detail}}
        {{#> "collectiongoods"}}
    {{/each}}
    </div>
</div>
<xmp type="template" name="collectiongoods">
    <div class="goodsitem">
       <!--  <div class="btnbox">
            <button event-click="{{'$Top.$Event.user.collect_goods_add_to_cart'}}" class="icon-cart" title="添加到购物车"></button>
            <button event-click="{{'$Top.$Event.remove_goods_from_collect'}}" class="icon-remove2" title="移除"></button>
        </div> -->
        <div class="imgbox" source-src="{{preview_img_url}}?imageView/1/w/200/h/200">
            <a href="{{url}}" target="_blank">
                <img class="goodsimg" bind-src="{{$CPrivate.cut_url||(preview_img_url+'?imageView/1/w/50/h/50')}}" />
            </a>
        </div>
        <div class="infobox">
            <div class="item"><a target="_blank" href="${href}" class="goodsname">{{goods_name}}</a></div>
            <div class="item">￥{{price}}</div>
            <div class="item">
                <button event-click="{{'$Top.$Event.user.collect_goods_add_to_cart'}}">添加到购物车</button>
                <button event-click="{{'$Top.$Event.remove_goods_from_collect'}}">移除</button>
            </div>
        </div>
    </div>
    <script type="text/vm">
    function(vm) {
        var box = vm.queryElement({
            className: "imgbox"
        })[0];
        var $box ;
        require(['jQuery'], function() {
            $box = $(box);
            $box.css('height', $box.width() * 0.7);
        });
        jSouper.onElementPropertyChange(box, "source-src", function(key, value) {
            if (value) {
                //将图片智能裁剪并显示成按钮背景
                require(["smartcrop-toimg"], function(smartCropToImg) {
                    smartCropToImg("http://" + location.host + "/proxy?url=" + encodeURIComponent(value), {
                        width: $box.width(),
                        height: $box.height()
                    }, function(base64) {
                        vm.set("$CPrivate.cut_url", base64);
                    });
                });
            }else{
                vm.set("$CPrivate.cut_url", "");
            }
        }, true)
    }
    </script>
</xmp>
